<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.courseList {
		// position: absolute;
		// top: 0;
		// bottom: $tabbar-height;
		width: 100%;
		background-color: $bgw;
		font-size: 1.2rem;
		box-sizing: border-box;
		background-color: $main-bgc-white;
		position: absolute;
		top: 0;
		bottom: 0;
		overflow: hidden;
		.contentWP{
			position: relative;
			width: 100%;
			padding: 0 1.6rem;
			display: flex;
			box-sizing: border-box;
			.leftList{
				flex: 0 0 7rem;
				background-color: #F6F6F6;
				box-sizing: border-box;
				border-radius: 0.6rem;
				overflow-y: scroll;
				.list{
					overflow-y: scroll;
					width: 7rem;
					height: 100%;
					.item{
						width:100%;
						padding: 1.5rem 0.3rem;
						text-align: center;
						box-sizing: border-box;
						font-size: 1.3rem;
						&.active{
							background-color: #D4DCF9;
							color:$mainColor;
						}
					}
				}
			}
			.rightList{
				flex: 1;
				margin-left: 0.8rem;
				overflow-y: scroll;
				box-sizing: border-box;
				height: 100%;
				.list{
					height: 100%;
					overflow-y: scroll;
					.item{
						display: flex;
						margin-bottom:1.8rem;
						.imgBox{
							flex: 0 0 7rem;
							height: 5rem;
							border-radius: 0.6rem;
							overflow: hidden;
						}
						.content{
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							margin-left: 0.6rem;
							.title {
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								/* 设置行数 */
								-webkit-box-orient: vertical;
								overflow: hidden;
								color: $color0;
								font-size: 1.5rem;
								line-height: 1.2em;
							}
							.desc {
								span {
									color: $color2;
									line-height: 1.2em;
									&.split {
										font-size: 0.5rem;
									}
									&.school{
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-line-clamp: 1;
										/* 设置行数 */
										-webkit-box-orient: vertical;
										overflow: hidden;
									}
								}
								.text{
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									/* 设置行数 */
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
<template>
	<div class="courseList">
		<div ref="searchBox">
			<search-box></search-box>
		</div>
		<div class="contentWP" ref="contentWP" :style="{height: height+'px'}">
			<div class="leftList" :style="{height: (Number(height)-70)+'px'}">
				<div class="list">
					<div class="item" :class="active==index?'active':''" v-for="(item,index) in labelList" :key="index" @click="onClickLabels(index,item.id)">
						{{item.name}}
					</div>
				</div>
			</div>
			<div class="rightList">
				<!-- <van-list
				  v-model="loading"
				  :finished="finished"
				  finished-text="没有更多了"
				  @load="onLoad"
				>
					<div class="list">
					  <van-cell v-for="item in list" :key="item" :title="item" />
					</div>
				</van-list> -->
				<div class="list">
					<div class="item" v-for="item in courseList" :key="item.id" @click="toDetailView(item)">
						<div class="imgBox">
							<van-image width="7rem" height="5rem" fit="cover" :src="item.images" />
						</div>
						<div class="content">
							<div class="title">{{item.name}}</div>
							<div class="desc">
								<span class="text">{{item.teacher&&item.teacher.name||'未设置教师'}} | {{item.type==1?`共${item.course_duration}课时`:(item.address||'上课地址未设置')}}</span>
								
							</div>
						</div>
					</div>
					<div v-if="finished==false">
					  <van-button class="load-more margB-l" :loading="loading" block @click="CourseH5Pagelist">加载更多</van-button>
					  
					</div>
					<div class="no-data color-s padding-all-m" v-if="finished">已经到底了</div>
					<div class="tabbar-height-white"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import { Toast } from 'vant';
	import SearchBox from '@/components/SearchBox.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "courseList",
		mixins: [myMixins],
		components: {
			SearchBox
		},
		// watch:{
		// 	tabActive(newVal) {
		// 		console.log("newVal",newVal)
		// 	}
		// },
		data() {
			return {
				height: '',
				active:0,
				labelList:[],
				courseList:[],
				loading: false,
				finished: false,
				pageNo: 1,
				pageSize: 10,
				tag:1,
				selectedCampus:'',
				type:'',
				list: [],
				sort:''
			}
		},
		created() {
			const _this = this;
			
			// this.courseList = this.$store.state.courseList
			const selectedCampus = JSON.parse(localStorage.getItem('selectedCampus'))
			this.selectedCampus = selectedCampus
			this.type = this.$route.query.tag
		},
		mounted() {
			//屏幕高度
			const screenHeight = document.body.clientHeight
			console.log("screenHeight",screenHeight)
			//搜索框高度
			const searchWrapper = this.$refs.searchBox
			console.log("searchBox",searchWrapper.clientHeight)
			const searchBoxHeight = searchWrapper.clientHeight
			//list高度
			this.height = screenHeight - searchBoxHeight
			//alert("this.height:"+this.height)
			// document.title = '活动管理'
			this.tag = this.$route.query.tag
			this.active = (Number(this.$route.query.index4label) + 1) || 0
			console.log("this.active",this.active)
			// Number(this.$route.query.labelId)
			this.sort = this.$route.query.labelId
			this.CourseH5Pagelist()
			this.CoursesortH5Pages()
		},
		methods: {
			stopPropagation(e) {
				// 阻止事件冒泡到DOM树上
				e.stopPropagation();
		  },
			// 获取课程分类 type 1 线上  2线下
			CoursesortH5Pages() {
				const _this = this;
				let params = {
					type: _this.type,
					pageNo: 1,
					pageSize: 100
				}
				// Toast.loading({
				//   forbidClick: true,
				// });
				_this.$request.CoursesortH5Pages(params).then(res => {
					let data = res.data.data
					_this.labelList = data
					if(this.tag==1){
						document.title = '在线学习'
						let arr = _this.labelList
						this.labelList = [{id:'',name:'全部'},...arr]
					}else if(this.tag==2){
						document.title = '线下课程'
						let arr = _this.labelList
						this.labelList = [{id:'',name:'全部'},...arr]
					}
					// this.$store.commit('setCaseList', this.caseList);
				})
			},
			onClickLabels(index,id) {
				this.active = index
				this.sort = id
				console.log("onClickLabels_index", index)
				console.log("onClickLabels_id", id)
				this.pageNo = 1
				this.courseList = []
				this.CourseH5Pagelist()
			},
			CourseH5Pagelist() {
				const _this = this;
				
				// Toast.loading({
				//   forbidClick: true,
				// });
				
				let params = {
					sort: _this.sort,
					type: _this.type,
					campus_id: _this.selectedCampus.id,
					pageNo: _this.pageNo,
					pageSize: _this.pageSize
				}
				this.loading = true
				_this.$request.CourseH5Pagelist(params).then(res => {
					let data = res.data.data
					_this.courseList.push(...data)
					console.log(_this.courseList.length)
					if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
						_this.finished = true;
					} else {
						_this.pageNo++
					}
					// this.$store.commit('setCaseList', this.caseList);
				}).finally(res=>{
					this.loading = false
				})
			},
		}
	};
</script>
